<template>
  <base-layout
    :dialogVisible="dialogVisible"
    :dialogTitle="dialogTitle"
    @dialog-close="dialogClose"
    :visibleContent2="true"
  >
    <template #searchPanel>
      <el-form
        :inline="true"
        ref="fromdata"
        :model="form"
        :rules="rules"
        label-width="90px"
        label-position="right"
      >
        <el-row class=''>
          <el-col :span="12">保险代理公司信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-form-item label="保险代理公司名称:" prop="companyName">
            <el-input
              v-model="form.companyName"
              clearable
              maxlength="30"
              placeholder="保险公司名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属城市:" prop="cityCode">
            <CitySelect v-model="form.cityCode" placeholder="所属城市" />
          </el-form-item>
          <el-form-item label="所属区县:" prop="countyCode">
            <District
              v-model="form.countyCode"
              :cityCode="form.cityCode"
              placeholder="所属区县"
            />
          </el-form-item>
          <el-form-item label="公司地址:" prop="address">
            <el-input
              v-model="form.address"
              clearable
              maxlength="30"
              placeholder="公司地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人:" prop="contactName">
            <el-input
              v-model="form.contactName"
              clearable
              maxlength="30"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话:" prop="contactPhone">
            <el-input
              v-model="form.contactPhone"
              clearable
              maxlength="30"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-row>
          <el-col :span="24">
            <el-form-item label="主营业务:" prop="note">
              <el-input
                type="textarea"
                :rows="6"
                placeholder=""
                v-model="form.note"
                style="width: 600px"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        </el-row>
      </el-form>
    </template>
    <template #contentPanel>
      <el-row>
        <el-col :span="20">
          <el-radio-group v-model="selectedType">
            <el-radio-button :label="1">代理保险分公司</el-radio-button>
            <el-radio-button :label="2">代理门店</el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col :span="4" align="right">
          <el-button @click="addSelectedItem">新增</el-button>
        </el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-form>
        <el-table :data="form.agencyBranchList" v-if="selectedType == 1">
          <el-table-column label="保险分公司" align="center" prop="name" >
            <template slot-scope="scope">
              <el-select
                clearable
                v-model="scope.row.branchCompanyId"
                placeholder="所属门店"
              >
                <el-option
                  v-for="item in branchCompanyList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.companyName"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="渠道码" align="center" prop="name" >
            <template slot-scope="scope">
              <el-input v-model.trim="scope.row.channelCode"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="mobilePhone" >
            <template slot-scope="scope">
              <el-input v-model.trim="scope.row.remark"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button  size="mini" @click="handleaAentCompanyDataDelete(scope.$index)">-</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-table :data="form.agencyStoreList" v-if="selectedType == 2">
          <el-table-column label="门店" align="center" prop="storeId" >
            <template slot-scope="scope">
                <job-shop
                  v-model="scope.row.storeId"
                  :disabled="disabledType"
                  placeholder="所属门店"
                />
            </template>
          </el-table-column>
          <el-table-column label="送修码" align="center" prop="sendRepairCode" >
            <template slot-scope="scope">
                <el-input v-model.trim="scope.row.sendRepairCode"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="remark" >
            <template slot-scope="scope">
                <el-input v-model.trim="scope.row.remark"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
                <el-button  size="mini" @click="handleStoresDataDelete(scope.$index)">-</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </template>
    <template #contentPanel2>
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="save">保存</el-button>
      </el-row>
    </template>
  </base-layout>
</template>

<script>
import baseMixin from "@/mixins/base";
import { CarBrand } from "@/components/index";
import { 
  getCompanyDetail,
  createInsuranceCompany, 
  updateInsuranceCompany, 
  dataList
} from '@/api/after-sale/systemManage/insurance'
export default {
  components: {
    CarBrand,
  },
  mixins: [baseMixin({})],
  data() {
    return {
      form: {
        type: 3,
        agencyBranchList: [
          {
            branchCompanyId: null,
            branchCompanyName: '',
            channelCode: '',
            remark: ''
          }
        ],
        agencyStoreList: [
          {
            storeId: null,
            storeName: '',
            sendRepairCode: '',
            remark: ''
          }
        ],
      },
      rules: {
        companyName: [{ required: true,  message: '请输入', trigger: ['blur', 'change'] }],
        cityCode: [{ required: true,  message: '请输入', trigger: ['blur', 'change'] }],
        contactName: [{ required: true,  message: '请输入', trigger: ['blur', 'change'] }],
        companyCode: [{ required: true,  message: '请输入', trigger: ['blur', 'change'] }],
        contactPhone: [{ required: true,  message: '请输入', trigger: ['blur', 'change'] }],
        countyCode: [{ required: true,  message: '请输入', trigger: ['blur', 'change'] }],
        note: [{ required: true,  message: '请输入', trigger: ['blur', 'change'] }],
        address: [{ required: true,  message: '请输入', trigger: ['blur', 'change'] }],
      },
      selectedType: 1,
      branchCompanyList: [],
    };
  },
  mounted() {
    let { id } = this.$route.query;
    if (id) {
      this.form.id = id;
      getCompanyDetail(id).then((res) => {
        let { success, data } = res;
        if (success) {
          this.form = { ...this.form, ...data };
        }
      });
    }
    this.getBranchCompany();
  },
  methods: {
    async getBranchCompany() {
      const {success, data} = await dataList({type: 2}, 1000, 1);
      if (success) {
        this.branchCompanyList = data.content;
      }
    },
    //新增单项
    addSelectedItem() {
      if (this.selectedType == 1) {
        this.form.agencyBranchList.push({
          branchCompanyId: null,
          branchCompanyName: '',
          channelCode: '',
          remark: ''
        });
      } else {
        this.form.agencyStoreList.push({
          storeId: null,
          storeName: '',
          sendRepairCode: '',
          remark: ''
        });
      }
    },
    //删除单项代理公司
    handleaAentCompanyDataDelete(index) {
      this.form.agencyBranchList.splice(index,1)
    },
    //删除单项代理门店
    handleStoresDataDelete(index) {
      this.storesData.splice(index,1)
    },
    //保存
    save() {
      this.$refs["fromdata"].validate((valid) => {
        if (valid) {
          this.submit();
        } else {
          return
        }
      });      
    },
    async submit() {
      const { success } = this.form.id ? await updateInsuranceCompany(this.form) : await createInsuranceCompany(this.form);
      if (success) {
        this.$message.success("保存成功");
        this.closeRouter();
      }
    }
  },
};
</script>
<style lang="scss" scoped></style>
